<!--
* Copyright (c) KylinSoft Co., Ltd. 2025.All rights reserved.
* Non open source, The copyright belongs to KylinSoft Co., Ltd. 
-->
<template>
  <div>
    <div class="kylin-form">
      <el-table
        cell-class-name="ky-cell-class"
        :header-cell-style="{
          color: 'black',
          'background-color': '#FAFAFA',
        }"
        :cell-style="{ color: 'black' }"
        ref="multipleTable"
        tooltip-effect="dark"
        style="width: 100%"
        size="small"
        :data="backupData"
      >
        <el-table-column width="55">
          <template #default="scope">
            <el-checkbox v-model="scope.row.isShow" :disabled="scope.row.isRequired"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column :label="'列名'">
          <template #default="scope">
            {{ scope.row.name === 'register_time' ? t('osUpgrade.syncTime') : t(scope.row.label) }}{{ scope.row.isRequired ? '（必选）' : '' }}
          </template>
        </el-table-column>
        <el-table-column :label="'列宽'" prop="width">
          <template #default="scope">
            <el-input
              placeholder="请输入列宽，列宽不能小于40"
              v-model="scope.row.width"
              @change="(val) => handleWidthChange(val, scope.$index)"
            >
              <template #append>px</template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog-footer">
      <el-button class="kylin-button" @click="handleOk">提交</el-button>
      <el-button class="kylin-button" @click="handleReset">重置</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';

const { t } = useI18n();

interface ColumnItem {
  id: number | string;
  name: string;
  width: number | string;
  isShow: boolean;
  isRequired?: boolean;
}

const props = defineProps<{
  customData: ColumnItem[];
  rawData: ColumnItem[];
}>();

const emit = defineEmits<{
  (e: 'handleOk', data: ColumnItem[]): void;
  (e: 'click'): void;
}>();

const backupData = ref<ColumnItem[]>([]);

// 初始化和监听 customData 变化
watch(
  () => props.customData,
  (val) => {
    console.log('[ val ] >', val)
    backupData.value = val.map((item) => ({ ...item }));
  },
  { immediate: true, deep: true },
);

// 列宽限制
function handleWidthChange(value: any, index: number) {
  const reg = /^[0-9]+$/gi;
  if (!reg.test(value)) {
    backupData.value[index].width = 'auto';
  } else if (Number(value) < 40) {
    ElMessage.warning(t('system.column_width_limit1'));
    backupData.value[index].width = 'auto';
  } else if (Number(value) > 500) {
    ElMessage.warning(t('system.column_width_limit2'));
    backupData.value[index].width = 'auto';
  }
}

// 重置
function handleReset() {
  backupData.value = props.rawData.map((item) => ({ ...item }));
}

// 取消
function handleCancel() {
  emit('click');
}

// 确认
function handleOk() {
  emit('handleOk', backupData.value);
}
</script>

<style lang="scss" scoped>
.select_all {
  margin-right: 20px;
  margin-left: 6px;
}

.kylin-form {
  width: 100%;
}

.el-table {
  border: 1px solid #ebeef5;
  .line-color {
    background-color: #f2f7ff;
  }
  .el-checkbox__inner {
    border: 1px solid #409eff;
  }
}
.dialog-footer {
  margin-top: 16px;
  text-align: right;
}
</style>
